<template>
  <div class="dialog" v-show="showed">
    <div class="flex dialog__title">
      <div class="flex-con">
        <el-badge :value="unReadMsgCount" :hidden="unReadMsgCount<=0">
          我的消息
        </el-badge>
      </div>
      <i class="el-icon-close" @click="showed = false"></i>
    </div>
    <div class="dialog__content">
      <ul>
        <li v-for="item in items" class="item" :key="item.id" :class="{'item--unread':!item.readFlag}">
          <div class="item__inner">
            <div class="item__main">
              <div class="flex item__header">
                <div class="item__title flex-con">
                  {{ item.title }}
                </div>
                <div class="item__time">
                  {{ item.gmtCreate }}
                </div>
              </div>
              <div class="item__body" v-html="item.intro">
              </div>
            </div>
            <div class="item__btnList">
              <el-button size="mini" type="primary" @click="handleToView(item)" v-if="item.businessParamType > 0">去查看
              </el-button>
              <el-button size="mini" @click="handleRead(item)" v-if="!item.readFlag">标记为已读</el-button>
            </div>
          </div>
        </li>
      </ul>
      <div class="dialog__more" v-if="items.length > 20">
        <el-button size="mini" @click="handleViewMore">查看更多 <i class="el-icon-more"></i></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {noticeApi} from "@/feature/mms/infra/api/noticeApi";
import {mapGetters} from "vuex";
import {EventBus} from "@/framework/infra/event/EventBus";
import EventNames from "@/infra/event/EventNames";
import NoticeMsgParamType from "@/feature/mms/infra/constants/NoticeMsgParamType";

export default {
  name: "MsgNoticeDialog",
  computed: {
    ...mapGetters(['sidebar', 'userInfo', 'unReadMsgCount'])
  },
  data() {
    return {
      visible: true,
      showed: false,
      items: []
    }
  },
  watch: {
    unReadMsgCount() {
      if (this.changeFlag) {
        this.changeFlag = false
        return
      }
      this.loadItems()
    }
  },
  created() {
    this.queryParam = {
      pageNo: 1,
      pageSize: 20
    }
    EventBus.on(EventNames.newMsg, this.loadItems)
  },
  methods: {
    handleToView(item) {
      if (item.businessParamType === NoticeMsgParamType.TITLE_UPDATE.id) {
        // console.log(this.$route)
        this.$router.push({path: '/pdt/new-product-register', query: {id: item.businessParams}})
      }
      this.handleRead(item)
    },
    handleRead(item) {
      noticeApi.read(item.id).then(() => {
        item.readFlag = 1
        this.changeFlag = true
        this.$store.commit('app/setUnReadMsgCount', this.unReadMsgCount - 1 >= 0 ? this.unReadMsgCount - 1 : 0)
      })
    },
    loadItems() {
      noticeApi.myMsgList(this.queryParam).then(data => {
        this.items = data
        this.showed = true
      })
    },
    handleViewMore() {
      this.$router.push('/mms/my-msg')
      this.showed = false
    }
  }
}
</script>

<style scoped lang="scss">
.dialog {
  position: fixed;
  right: 60px;
  bottom: 60px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  width: 400px;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 10000;
  display: flex;
  flex-direction: column;

  &__title {
    font-weight: bold;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #eee;
    padding: 15px;
    background-color: #f7f8fa;
  }

  &__content {
    overflow-y: auto;
    flex-grow: 1;
  }

  &__more {
    text-align: center;
    padding: 20px 0;
  }
}

.item {
  padding: 10px 20px 0 30px;

  &__inner {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }

  &__title {
    font-size: 14px;
    font-weight: bold;
  }

  &__main {
    opacity: 0.3;
  }

  &--unread {
    .item__main {
      opacity: 1;
    }

    .item__title {
      position: relative;

      &:after {
        position: absolute;
        left: -15px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #E33737;
        top: 4px;
        content: ' ';
        display: block;
      }
    }
  }

  &__header {

    padding: 10px 0 10px 0;
  }

  &__body {
    color: #333;
    font-size: 12px;
    line-height: 1.6em;
    //padding: 10px 0;
    //@include text-line(2);
    margin-bottom: 10px;
  }

  &__time {
    font-size: 12px;
    color: #999;
  }
}
</style>
